<template>
	<div class="view-my" >
		<div class="title">牙位组件样例</div>
		<div class="mx-1">1.点击十字花，打开牙位组件，选择牙位信息后，反显示在十字花上；</div>
		<div class="mx-1">2.若十字花上有数据，点击十字花则数据加载再对应牙位信息上；</div>
		<div class="mx-1">3.点击关闭按钮，取消页面均不会保存数据，只有点击确定才会保存数据；</div>
		<div class="mx-1" style="margin-top: 10px;">4.
		<el-button  @click="queryAllData" type="success">获取所有牙位组件数据</el-button>
		获取数据内容：<text class="mx-1" id="allList" />
		</div>
		<div class="mx-1" style="margin-top: 10px;">5.页面加载直接给传参牙位赋值数据内容：
		业务关联ID：<text class="mx-1" id="testAddDataId">Jn00998</text>
		牙位数据：<text class="mx-1" id="testAddData">{"LTBox":"8,7,6,5,4,3,2,1","LBBox":"8,7,6,5,4,3,2,1","RTBox":"1,2,3,4,5,6,7,8","RBBox":"1,2,3,4,5,6,7,8"}</text>
		</div>
		<div class="mx-1" style="margin-top: 10px;">5.
		<el-button  @click="putData2" type="info">动态传参牙位组件赋数据</el-button>
		点击按钮赋值数据内容：
		业务关联ID：<text class="mx-1" id="testAddDataId2">buttonTest</text>
		牙位数据：<text class="mx-1" id="testAddData2">{"LTBox":"8,7,6,5,4,3,1","LBBox":"8,7,6,4,3,2,1","RTBox":"1,3,4,5,6,7,8","RBBox":"1,2,3,5,6,7,8"}</text>
		</div>
 <el-container >
	  <el-aside width="160px" >
			  <!-- 牙位组件插入 -->
			  <TOOTH toothJsonData=""  bizId="test1"/>
		  </el-aside>
	      <el-main>
			   <el-form-item label="主诊断">
			        <el-input type="textarea" />
			      </el-form-item>
		  </el-main>
	    </el-container>
 <el-container >
	  <el-aside width="160px" >
			  <!-- 牙位组件插入 -->
			  <TOOTH toothJsonData=""  bizId="test2"/>
		  </el-aside>
	      <el-main>
			   <el-form-item label="其他诊断">
			        <el-input type="textarea" />
			      </el-form-item>
		  </el-main>
	    </el-container>
		 <el-container >
		<el-aside width="160px" >
					  <!-- 牙位组件插入 -->
					  <TOOTH  toothJsonData="" bizId="test3"/>
				  </el-aside>
		    <el-main>
					   <el-form-item label="口腔">
					        <el-input type="textarea" />
					      </el-form-item>
				  </el-main>
		  </el-container>
		  <el-container >
		  <el-aside width="160px" >
		  			  <!-- 牙位组件插入 -->
		  			  <TOOTH :toothJsonData="toothJsonData" :bizId="bizId" />
		  		  </el-aside>
		      <el-main>
		  			   <el-form-item label="传参数牙位">
		  			        <el-input type="textarea" />
		  			      </el-form-item>
		  		  </el-main>
		    </el-container>
			<el-container >
			<el-aside width="160px" >
						  <!-- 牙位组件插入 -->
						  <TOOTH ref="paramTesttooth" toothJsonData="" bizId="" />
					  </el-aside>
			    <el-main>
						   <el-form-item label="动态传参数牙位">
						        <el-input type="textarea" />
						      </el-form-item>
					  </el-main>
			  </el-container>
	</div>

</template>
<script lang="ts" name="tooth-index" setup>
	import $ from 'jquery';
import {  ref} from "vue";
// 导入组件
import TOOTH from './tooth.vue';
const paramTesttooth=ref();//获取动态传参牙位组件

let toothJsonData=ref("");
let bizId=ref("");
	$(document).ready(function(){
		putData();
	});
//获取所有牙位数据
function queryAllData(){
	 var data=[];
	$("[id^='TextTooth_']").each(function(index) {
		data.push({"bizId":$(this).data("bizId"),"tooth":$(this).data("tooth")});
	});
	$("#allList").text(JSON.stringify(data));
}
//给牙位组件传参
function putData(){
toothJsonData.value=$("#testAddData").text();
bizId.value=$("#testAddDataId").text();
}
function putData2(){
paramTesttooth.value.changeData($("#testAddData2").text(),$("#testAddDataId2").text());
}


	// function beforeClose(done) {
	// 	ElMessageBox.confirm("是否关闭？", "提示", {
	// 		type: "warning"
	// 	})
	// 		.then(() => {
	// 			done();
	// 		})
	// 		.catch(() => null);
	// }

</script>

<style lang="scss">

</style>
